<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>分类</title>
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
	</head>
	<body>
		<div class="web">
			<!-- 头部 -->
			<header>
				<div class="boxT">
					<div class="leftBox">
						<button type="button">Back</button>
					</div>
					<div class="centerBox">
						<span>分类</span>
					</div>
					<div class="cityBox">
						<i class="iconfont icon-xiasanjiaoxing"></i>
						<select name="">
							<option value="">广州市</option>
							<option value="">汉川市</option>
							<option value="">孝感市</option>
						</select>
					</div>
				</div>
				<div class="boxB">
					<div class="swiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav1.png">
									</div>
									<h2>美食</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav2.png">
									</div>
									<h2>电影</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav3.png">
									</div>
									<h2>运动</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav4.png">
									</div>
									<h2>唱歌</h2>
								</div>
							</div>

							<div class="swiper-slide">
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav1.png">
									</div>
									<h2>测试1</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav2.png">
									</div>
									<h2>电影</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav3.png">
									</div>
									<h2>运动</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav4.png">
									</div>
									<h2>唱歌</h2>
								</div>
							</div>

							<div class="swiper-slide">
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav1.png">
									</div>
									<h2>测试2</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav2.png">
									</div>
									<h2>电影</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav3.png">
									</div>
									<h2>运动</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav4.png">
									</div>
									<h2>唱歌</h2>
								</div>
							</div>

							<div class="swiper-slide">
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav1.png">
									</div>
									<h2>测试3</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav2.png">
									</div>
									<h2>电影</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav3.png">
									</div>
									<h2>运动</h2>
								</div>
								<div class="navBox">
									<div class="imgBox">
										<img src="../images/sortnav4.png">
									</div>
									<h2>唱歌</h2>
								</div>
							</div>
				  </div>
						<div class="swiper-pagination"></div>
					</div>
				</div>
			</header>

			<!-- 内容 -->
			<main>
				<!-- 美食 -->
				<section class="item">
					<div class="title">
						<div class="left">
							<i class="iconfont icon-dangao"></i>
							<h2>美食类</h2>
						</div>
						<div class="right">
							<h2>更多</h2>
							<i class="iconfont icon-youjiantou"></i>
						</div>
					</div>
					<div class="content">
						<a href="detail.html">
							<img src="../images/sortfood1.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfood2.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfood3.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfood4.png">
						</a>
					</div>
				</section>

				<!-- 运动 -->
				<section class="item">
					<div class="title">
						<div class="left">
							<i class="iconfont icon-yundonghuwaileimu"></i>
							<h2>运动类</h2>
						</div>
						<div class="right">
							<h2>更多</h2>
							<i class="iconfont icon-youjiantou"></i>
						</div>
					</div>
					<div class="content">
						<a href="detail.html">
							<img src="../images/sortsport1.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortsport2.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortsport3.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortsport4.png">
						</a>
					</div>
				</section>

				<!-- 电影 -->
				<section class="item">
					<div class="title">
						<div class="left">
							<i class="iconfont icon-01"></i>
							<h2>电影类</h2>
						</div>
						<div class="right">
							<h2>更多</h2>
							<i class="iconfont icon-youjiantou"></i>
						</div>
					</div>
					<div class="content">
						<a href="detail.html">
							<img src="../images/sortfilm1.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfilm2.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfilm3.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfilm3.png">
						</a>
					</div>
				</section>

				<!-- 音乐 -->
				<section class="item">
					<div class="title">
						<div class="left">
							<i class="iconfont icon-dangao"></i>
							<h2>唱歌类</h2>
						</div>
						<div class="right">
							<h2>更多</h2>
							<i class="iconfont icon-youjiantou"></i>
						</div>
					</div>
					<div class="content">
						<a href="detail.html">
							<img src="../images/sortfood1.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfood1.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfood1.png">
						</a>
						<a href="detail.html">
							<img src="../images/sortfood1.png">
						</a>
					</div>
				</section>
			</main>

			<!-- 尾部 -->
			<footer>
				<div class="box">
					<div class="bot">
						<a href="index.html"><i class="iconfont icon-fangzi1"></i></a>
						<h2>首页</h2>
					</div>
					<div class="bot">
						<a href="sort.html"><i class="iconfont icon-fenlei"></i></a>
						<h2>分类</h2>
					</div>
					<div class="bot">
						<a href="found.html"><i class="iconfont icon-compass"></i></a>
						<h2>发现</h2>
					</div>
					<div class="bot">
						<a href="user.html"><i class="iconfont icon-renxiang2"></i></a>
						<h2>我的</h2>
					</div>
				</div>
			</footer>
		</div>
	</body>

	<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
</html>
